<template>
  <div class="hvr-underline-from-left m-4">
    <div class="flex border" v-for="(item) in data">
      <img src="@/assets/bg.png" class="w-44 h-25" alt="">
      <div class="flex flex-col flex-1 pl-2">
        <!-- 标题 -->
        <div class="text-lg m-2 flex justify-between">
          <span>{{ item.name }}</span>
          <div class="text-sm">
            <span class="mr-4 hvr-grow cursor-pointer">✍️ 编辑</span>
            <span class="mr-4 hvr-grow cursor-pointer">❌ 删除</span>
          </div>
        </div>
        <!-- 内容 -->
        <div class="text-sm h-15 w-11/12 ml-2 leading-5 over-line">

          <n-space>
            <n-tag type="primary">{{ item.courseTypeName }}</n-tag>
            <n-tag type="warning">{{ item.typeName }}</n-tag>
          </n-space>
          <p>{{ item.content }}</p>

        </div>
        <!-- 作者、点赞评论 -->
        <div class="flex p-1 justify-between items-center">
          <!-- 头像+作者 -->
          <div class="author flex justify-center items-center">
            <img src="@/assets/bg.png" class="rounded-full h-8 w-8" alt="">
            <span class="text-xs ml-2 mt-2">发表人：{{ item.createByName }}</span>
          </div>
          <!-- 日期... -->
          <div class="other mt-4">
            <span>{{ item.createByDate }}</span>
            <span class="m-4 hvr-grow cursor-pointer hvr-float-shadow">👍 {{ item.goodCount }}</span>
            <span class="hvr-grow cursor-pointer hvr-float-shadow">👀 {{ item.seeCount }}</span>
            <span
                class="m-4  hvr-grow cursor-pointer hvr-float-shadow">💬 {{
                item.commentCount
              }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {requestArticlePage} from "../../../api/bbs/bbsApi";

const props = defineProps(
    {
      courseType: {
        type: Number
      }
    }
)
const data = ref([])
const pageParam = {
  page: 1,
  size: 10
}
/**
 * 加载data
 */
const loadData = () => {
  requestArticlePage({
    ...pageParam,
    courseType: props.courseType
  }).then(res => {
    data.value = [data.value, ...res.data]
  })
}
onMounted(() => {
  loadData()
})

defineExpose({
  loadData
})


</script>

<style lang="less" scoped>
.over-line {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
